<template>
  <div class="receivedetail">
    <p class="detail">收货单明细</p>

    <div class="btn">
      <el-button type="primary" class="account" @click="SHDialogVisible = true"
        >审核</el-button
      >
    </div>

    <div class="detailheader">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="deliveryId" label="收货单号" />
        <el-table-column prop="supplierShortName" label="供应商简称" />
        <el-table-column prop="address" label="送货地址" />
        <el-table-column prop="deliveryDate" label="送货日期" />
        <el-table-column prop="deliveryMan" label="送货人" />
        <el-table-column prop="surveyor" label="验收人" />
        <el-table-column prop="checkDate" label="验收日期" />
        <el-table-column prop="auditDate" label="审核日期" />
        <el-table-column prop="purchasingManager" label="采购主管" />
        <el-table-column prop="taxRate" label="税率">
          <template slot-scope="scope">
            {{ scope.row.taxRate | taxRateFitlter }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="table">
      <el-table
        :data="datadetail"
        border
        style="width: 100%"
        :summary-method="getSummaries"
        show-summary
      >
        <el-table-column type="index" width="50" label="序号" />
        <el-table-column prop="goodsId" label="商品ID" />
        <el-table-column prop="goodsName" label="商品名称" />
        <el-table-column prop="goodsNum" label="送货数量" />
        <el-table-column prop="units" label="辅助单位" />
        <el-table-column prop="goodsWeight" label="送货重量(斤)" />
        <el-table-column prop="actualWeight" label="实际重量" />
        <el-table-column prop="price" label="单价" />
        <el-table-column prop="totalPrice" label="总金额" />
        <el-table-column prop="goodsStatus" label="验收状态">
          <template slot-scope="scope">
            {{ scope.row.goodsStatus | goodsStatusFitlter }}
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="200px">
          <template slot-scope="scope">
            <el-button type="primary" @click="checkaccept(scope.row)"
              >验收</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="SH">
      <el-dialog
        title="是否确认审核"
        :visible.sync="SHDialogVisible"
        width="30%"
        center
      >
        <el-form
          :inline="true"
          class="demo-form-inline"
          style="text-align:center"
        >
          <el-form-item label="税率">
            <el-input v-model="taxRate" placeholder="请输入税率">
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="aduitconfirm">确 认</el-button>
          <el-button @click="SHDialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>

    <div class="YS">
      <el-dialog :visible.sync="YSDialogVisible" width="35%" center>
        <el-form
          ref="YSdata"
          :model="YSdata"
          label-width="120px"
          label-position="right"
        >
          <el-form-item label="商品名称">
            <el-input v-model="YSdata.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="送货重量(斤)">
            <el-input v-model.number="YSdata.weight" disabled></el-input>
          </el-form-item>
          <el-form-item label="实际重量(斤)">
            <el-input v-model.number="YSdata.actualWeight"></el-input>
          </el-form-item>
          <el-form-item label="验收状态">
            <el-radio-group v-model="YSdata.goodsStatus">
              <el-radio :label="1">合格</el-radio>
              <el-radio :label="2">不合格</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="YSDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('YSdata')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getreceivedetail,
  receiveList,
  receiveListAudit
} from "@/api/receive.js";
export default {
  filters: {
    goodsStatusFitlter(value) {
      if (value === 0) {
        return "未验收";
      } else if (value === 1) {
        return "已验收";
      } else if (value === 2) {
        return "不合格";
      }
    },
    taxRateFitlter(value) {
      if(!value){
        return ''
      }else{
        return value + "%";
      }
        
    }
  },
  data() {
    return {
      tableData: [],
      datadetail: [],
      SHDialogVisible: false,
      YSDialogVisible: false,
      taxRate: "",
      YSdata: {
        name: "",
        weight: "",
        actualWeight: "",
        goodsStatus: 1,
        deliveryID: "",
        goodsId: ""
      },
      label: 1
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      var deliveryId = { deliveryId: this.$route.query.deliveryId };
      getreceivedetail(deliveryId)
        .then(res => {
          console.log(res);
          if (res.code === 20000) {
            var arr = [];
            arr.push(res.data);
            this.tableData = arr;
            this.datadetail = res.data.deliveryGoodsList;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //   合计列
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      var allmoney = 0;
      var goodsNum = 0;
      data.map(item => {
        allmoney += Number(item.totalPrice);
        goodsNum += Number(item.goodsNum);
        return { allmoney, goodsNum };
      });
      columns.forEach((column, index) => {
        sums[2] = "合计数量";
        sums[3] = goodsNum;

        sums[7] = "合计金额";
        sums[8] = allmoney.toFixed(2);
      });

      return sums;
    },
    // 验收弹框
    checkaccept(obj) {
      this.YSDialogVisible = true;
      this.YSdata.name = obj.goodsName;
      this.YSdata.weight = obj.goodsWeight;
      this.YSdata.goodsId = obj.goodsId;
    },
    // 验收弹框确认
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (!this.YSdata.actualWeight) {
            this.$message.error("请输入实际重量");
            return false;
          }
          var data = {
            deliveryId: Number(this.$route.query.deliveryId),
            goodsId: this.YSdata.goodsId,
            actualWeight: this.YSdata.actualWeight,
            goodsStatus: this.YSdata.goodsStatus
          };
          receiveList(data)
            .then(res => {
              console.log(res);
              if ((res.code = 20000)) {
                this.YSDialogVisible = false;
                this.init();
                this.YSdata.actualWeight = "";
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch(err => {
              this.$message.error(err.msg);
            });
        } else {
          console.log("error");
          return false;
        }
      });
    },
    // 审核弹框确认
    aduitconfirm() {
      var data = {
        deliveryId: Number(this.$route.query.deliveryId),
        taxRate: Number(this.taxRate)
      };
      receiveListAudit(data)
        .then(res => {
          // console.log(data);
          console.log(res);
          if (res.code == 20000) {
            this.SHDialogVisible = false;
            this.taxRate = "";
          } else {
            this.$message.error(res.msg);
            this.taxRate = "";
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.receivedetail {
  padding: 20px 20px;
  .detail {
    font-size: 22px;
    margin-bottom: 60px;
  }
  .btn {
    text-align: right;
    margin-bottom: 30px;
  }
  .detailheader {
    margin-bottom: 60px;
  }
}
</style>
